<template>
	<view class="kg-custom" :style="[{height:CustomBar + 'px'}]">
		<!-- <view class="kg-custom" style="height:210rpx"> -->
		<view class="hui-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
			<view class="action" @tap="onBackPage" v-if="isBack">
						<text class="cuIcon-back" :class="backColor"></text>
						<slot name="backText"></slot>
			</view>
			<slot name="left"></slot>
			<view class="content flex justify-start align-center" :style="[{top:StatusBar + 'px'}]">
						<slot name="content"></slot>
			</view>
			<slot name="right"></slot>
		    <view class="remove-white-line" :class="[bgColor]"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			bgColor: {
				type: String,
				default: ''
			},
			bgImage: {
				type: String,
				default: ''
			},
			isBack: {
				type: [Boolean, String],
				default: true
			},
			backColor:{
				type: String,
				default: ''
			}
		},
		computed: {
			style() {
				let StatusBar= this.StatusBar;
				let CustomBar= this.CustomBar;
				let bgImage = this.bgImage;
				let style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				if (this.bgImage) {
					style = `${style}background-image:url(${bgImage});`;
				}
				return style
			}
		},
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar
			};
		},
		methods:{
			onBackPage() {
			  if(getCurrentPages().length < 2 && 'undefined' !== typeof __wxConfig) {
			  	let url = '/' + __wxConfig.pages[0]
			    // console.log(url)
			  	return uni.redirectTo({url})
			  }
			  uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
.hui-bar {
	display: flex;
	position: relative;
	align-items: center;
	min-height: 100rpx;
	justify-content: space-between;
}

.hui-bar .action {
	display: flex;
	align-items: center;
	height: 100%;
	justify-content: center;
	max-width: 100%;
}

.hui-bar .action:first-child {
	margin-left: 30rpx;
	font-size: 30rpx;
}

.hui-bar .action .text-cut {
	text-align: left;
	width: 100%;
}

.hui-bar .action:first-child>.cuIcon-back {
	margin-left: -0.3em;
	margin-right: 0.3em;
}

.hui-bar .action:last-child {
	margin-right: 30rpx;
}

.hui-bar .action>.cuIcon-back {
	font-size: 36rpx;
}

// .hui-bar .action>text[class*="cuIcon-"]+text[class*="cuIcon-"] {
// 	margin-left: 0.5em;
// }

.hui-bar .content {
	position: absolute;
	text-align: center;
	width: calc(100% - 340rpx);
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
	min-height: 60rpx;
	font-size: 32rpx;
	// line-height: 60rpx;
	cursor: none;
	pointer-events: none;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.hui-bar.fixed{
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 100;
	box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
}
.kg-custom {
	display: block;
	position: relative;
  width: 100vw;
}

.kg-custom .hui-bar .content {
	width: calc(100% - 440rpx);
}

/* #ifdef MP-ALIPAY */
.kg-custom .hui-bar .action .cuIcon-back {
	opacity: 0;
}

/* #endif */

// .kg-custom .hui-bar .content image {
// 	height: 60rpx;
// 	width: 240rpx;
// }

.kg-custom .hui-bar {
	min-height: 0px;
	/* #ifdef MP-WEIXIN */
	padding-right: 220rpx;
	/* #endif */
	/* #ifdef MP-ALIPAY */
	padding-right: 150rpx;
	/* #endif */
	box-shadow: 0rpx 0rpx 0rpx;
	z-index: 100;
}
.remove-white-line{
  position:absolute;
  left:0;
  bottom:-1rpx;
  width:100%;
  height:2rpx;
  }

</style>
